/* 搜索 */
.search{
  width:100%;
  background: linear-gradient(rgb(1,115,222), rgb(78,169,245));
  padding:1em 0em;

  .box{
    display: flex;
    justify-content: space-between;
    background:#fff;
    width:97%;
    margin:0 auto;
    border-radius: 20px;
    height:35px;
    line-height:35px;
    overflow: hidden;

    .icon{
      margin-left:.8em;
      padding-top:.12em;
    }

    .input{
      width:70%;
      height:100%;
      padding-left:10px;
    }

    .btn{
      margin:0;
      width:25%;
      background: #4ea9f5;
      color:#fff;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}

/* 分类 */
.type{
  width:100%;
  background:#fff;
  margin-bottom:10px;

  .list{
    width: 100%;
    display: flex;
    overflow-x: scroll;

    /*修改滚动条样式*/
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 10px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background-color: rgba(59, 171, 94, 1);
      background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    }
    
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      // background: linear-gradient(rgb(1,115,222), rgb(78,169,245));
    }

    .item{
      width:20%;
      height:50px;
      line-height:50px;
      text-align: center;
      flex-shrink: 0;
      font-weight: bold;
    }

    .item.active{
      color: rgba(59, 171, 94, 1);
    }
  }
}

/* 列表 */
.contact{
  width:100%;
  height: 82vh;
  overflow-y: scroll;
  padding-bottom:6em;


  &::-webkit-scrollbar {
    width: 3px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(59, 171, 94, 1);
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
  }

  .list{
    width: 95%;
    margin:0 auto;
    display: flex;
    flex-wrap: wrap;

    .item{
      background:#fff;
      width:100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 3px;
      margin-bottom:10px;
      padding:1.5em 1.2em;

      .icon{
        width:20px;
        height:20px;

        img{
          width:100%;
          height:100%;
        }
      }

      .content{
        width:80%;
        overflow: hidden;

        .title{
          a{
            font-weight: bold;
            font-size:1.2em;
            margin-bottom: .3em;
            color:#123;
          }
        }

        .info{
          display: flex;
          color: #6c6c6c;
          font-size:.9em;
          align-items: flex-start;

          .icon{
            margin-right:.3em;
            flex-shrink: 0;
          }

          .desc{
            margin-top:.1em;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }
}